<!DOCTYPE html>
<html>

<head>
  <title>hello</title>

  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>

  <style>
    #photo {
      width: 500px;
      height: 332px;
      background-color: #d83a21;
      background-image: url(img/logo.jpg);
      background-repeat: no-repeat;
      background-size: 90%;
      background-position: 50% 50%;
    }
  </style>
</head>

<body>
<div id="photo"></div>

<div><button onclick="takeshot()">Take Screenshot</button></div>
<h1>Screenshot:</h1>

<div id="output"></div>

<script type="text/javascript">
  function takeshot() {
    let div = document.getElementById('photo');

    html2canvas(div).then(function (canvas) {
      document.getElementById('output').appendChild(canvas);
    })
  }
</script>
</body>

</html>
